<template>
	<view class="box">
		<!-- 头部 -->
		<view class="head">
			<view class="user-card">
				<!-- 用户信息 -->
				<view class="user-info">
					<!-- 用户头像 -->
					<view class="user-img">
						<image :src="user.userImg"></image>
					</view>
					<!-- 用户昵称和注册时间 -->
					<view class="info">
						<!-- 用户昵称 -->
						<view class="name">{{ user.nickName }}</view>
						<!-- 注册时间 -->
						<view class="create_time">注册时间：{{ user.time_stamp }}</view>
					</view>
					<!-- 设置 -->
					<view class="shezhi">
						<image @click="goUserInfo" src="/static/my/shezhi.png"></image>
					</view>
					<!-- 消息 -->
					<view class="message">
						<image src="/static/my/lingdang-xianxing.png"></image>
					</view>
				</view>
				<!-- 用户余额 -->
				<view class="num-wrapper">
					<!-- 余额 -->
					<view class="num-item">
						<view class="num">{{ user.balance }}</view>
						<view class="txt">余额</view>
					</view>
					<!-- 优惠卷 -->
					<view class="num-item">
						<view class="num">0</view>
						<view class="txt">优惠卷</view>
					</view>
					<!-- 积分 -->
					<view class="num-item">
						<view class="num">{{user.integral}}</view>
						<view class="txt">积分</view>
					</view>
				</view>
				<!-- 积分会员 -->
				<view class="vip-view">
					<!-- 提示信息 -->
					<view class="small">还未开发哦</view>
					<!-- 续费 -->
					<view class="acea-row">
						<view class="vip-btn">立即续费</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
			</view>
			<!-- 订单中心 -->
			<view class="order-wrapper" @click="goOrder">
				<view class="order-hd">
					<view class="left">订单中心</view>
					<view class="flexs">
						<view class="right">查看全部</view>
						<image src="/static/my/jinrujiantou.png"></image>
					</view>
				</view>
				<view class="order-bd">
					<view class="order-item" v-for="item in orderCenList" :key="item.id">
						<view class="pic">
							<image :src="item.image"></image>
						</view>
						<view class="txt">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="user-menus">
			<view class="menu-title">我的服务</view>
			<view class="list-box">
				<view @click="myServer(item)" class="item" v-for="item in serveList" :key="item.id">
					<image :src="item.pic"></image>
					<view class="txt">{{ item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<my-config></my-config>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../api/api.js";
	export default {
		data() {
			return {
				user: '',
				flag: "true",
				// 订单中心列表
				orderCenList: [],
				// 服务列表
				serveList: [],
			}
		},
		methods: {
			// 进入设置页面
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/user/user_info/user_info",
				})
			},
			goOrder() {
				uni.navigateTo({
					url: "/pages/order/order",
				})
			},
			myServer(item) {
				if (item.ser_id == "1159") {
					uni.navigateTo({
						url: "/pages/user/user_address_list/user_address_list"
					})
				} else if (item.ser_id == "1168") {
					uni.navigateTo({
						url: "/pages/chat/chat"
					})
				} else {
					uni.$showMsg(item.name + "正在开发中")
				}
			}
		},
		onLoad() {
			// 设置登录页面title
			uni.setNavigationBarTitle({
				title: "个人中心"
			})
			// 打开自动获取登录信息
			api.getUserInfo().then(res => {
				// 获取失败
				if (res.data.status != 200) {
					// 提示信息
					uni.$showMsg(res.data.data.err)
					// 1.8秒跳转登录页面
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/login/login",
						})
					}, 1800);
					return;
				}
				// 获取成功
				this.user = res.data.data.user;
				uni.$showMsg(res.data.msg);
			});
			// 获取订单中心图片
			api.getOrderCen().then(res => {
				// 获取失败
				if (res.data.status != 200) {
					// 提示信息
					uni.$showMsg(res.data.data.err)
					// 1.8秒跳转登录页面
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/login/login",
						})
					}, 1800);
					return;
				}
				// 获取成功
				this.orderCenList = res.data.data.orderList;
				uni.$showMsg(res.data.msg);
			});
			// 获取我的服务数据
			api.getMyServe().then(res => {
				// 获取失败
				if (res.data.status != 200) {
					// 提示信息
					uni.$showMsg(res.data.data.err)
					// 1.8秒跳转登录页面
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/login/login",
						})
					}, 1800);
					return;
				}
				// 获取成功
				this.serveList = res.data.data.severList;
				uni.$showMsg(res.data.msg);
			})
		}
	}
</script>

<style>
	/* 头部 */
	.head {
		width: 100%;
		height: 326px;
	}

	.user-card {
		position: relative;
		width: 100%;
		height: 165px;
		margin: 0 auto;
		padding: 18px 14px;
		background-image: url("/static/my/bg.png");
		background-size: 100% auto;
		background-color: rgba(29, 176, 252, 1);
	}

	/* 用户信息 */
	.user-info {
		width: 700rpx;
		height: 64px;
		z-index: 20;
		position: relative;
		display: flex;
	}

	/* 用户头像 */
	.user-info image {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	/* 用户昵称和注册时间 */
	.user-info .info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 10px;
		padding: 8px 0;
	}

	/* 用户昵称 */
	.user-info .info .name {
		color: #fff;
		font-size: 14px;
	}

	/* 注册时间 */
	.user-info .info .create_time {
		font-size: 13px;
		color: hsla(0, 0%, 100%, .6);
	}

	/* 设置和信息图标 */
	.shezhi image,
	.message image {
		align-self: flex-start;
		position: relative;
		margin-top: 8px;
		margin-right: 10px;
		width: 28px;
		height: 28px;
	}

	.message image {
		width: 25px;
		height: 25px;
	}

	/* 用户余额 */
	.num-wrapper {
		width: 700rpx;
		height: 50px;
		z-index: 30;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 11px;
		color: #fff;
	}


	.num-item {
		position: relative;
		width: 33.33%;
		text-align: center;
		font-size: 22px;
		font-weight: 700;
	}

	.num-item:nth-child(2)::before,
	.num-item:nth-child(3)::before {
		content: "";
		position: absolute;
		width: 1px;
		height: 14px;
		top: 50%;
		margin-top: -7px;
		background-color: hsla(0, 0%, 100%, .4);
		left: 0;
	}

	.num-item .txt {
		margin-top: 4px;
		font-size: 13px;
		color: hsla(0, 0%, 100%, .6);
	}

	/* 积分会员 */
	.vip-view {
		position: absolute;
		background-image: url("/static/my/jifenBg.png");
		background-size: 100% 100%;
		width: 750rpx;
		height: 44px;
		bottom: -1px;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 过期提醒 */
	.vip-view .small {
		margin-left: 150rpx;
		font-size: 13px;
		color: #905100;
		font-weight: 400;
	}

	/* 续费 */
	.vip-view .acea-row {
		margin-right: 70rpx;
		display: flex;
		align-items: center;
	}

	.vip-view .acea-row .vip-btn {
		color: #905100;
		font-weight: 400;
		font-size: 12px;
	}

	.vip-view .acea-row image {
		width: 17px;
		height: 17px;
	}

	/* 订单中心 */
	.order-wrapper {
		width: 700rpx;
		height: 116px;
		margin: 18rpx auto;
		background: #fff;
		border-radius: 8px;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.order-hd {
		width: 100%;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		color: #282828;
	}

	.order-hd .left {
		margin-left: 40rpx;
		font-weight: 700;
	}

	.order-hd .right {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 13px;
	}

	.flexs {
		margin-right: 25rpx;
	}

	.flexs {
		display: flex;
	}

	.order-hd image {
		width: 17px;
		height: 17px;
	}

	.order-bd {
		display: flex;
		width: 100%;
		height: 74px;
	}

	.order-bd .order-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20%;
		height: 74px;
	}

	.pic {
		position: relative;
		text-align: center;
	}

	.pic image {
		width: 50rpx;
		height: 50rpx;
	}

	.order-bd .order-item .txt {
		margin-top: 3px;
		font-size: 13px;
		color: #333;
	}

	/* 我的服务 */
	.user-menus {
		margin: 30rpx auto;
		width: 695rpx;
		height: 580rpx;
		background-color: #fff;
		border-radius: 8px;
	}

	.user-menus .menu-title {
		padding: 16px 16px 21px;
		font-size: 16px;
		color: #282828;
		font-weight: 700;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

	.list-box .item {
		height: 100rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 25%;
		margin-bottom: 25px;
		font-size: 13px;
		color: #333;
	}

	.list-box .item image {
		width: 50rpx;
		height: 50rpx;
	}

	.list-box .item .txt {
		padding-top: 20rpx;
		font-size: 13px;
		color: #333;
	}

	/* 底部 */
	.foot {
		width: 300rpx;
		height: 39px;
		margin: 80rpx auto;
		display: block;
		font-size: 12px;
		text-align: center;
		line-height: 39px;
		color: #CCCCCC;
	}
</style>